<template>
  <div>
    <el-form ref="form" id="warning" :show-message="false" :model="controlMsgForm" label-width="155px" :disabled="ifDisabled" style="padding: 0 40px 0 40px; margin-top: 20px" :rules="rules" label-position="left">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="主办单位" style="margin-bottom: 16px; margin-left: -9px" prop="organizer">
            <div class="warning-box-required" v-for="item in organizeroptions" :key="item.index">
              <p>{{formate(controlMsgFormFormal.organizer, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.organizer" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in organizeroptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否被委托管理" style="margin-bottom: 16px;" prop="isManaged">
            <div class="warning-box" v-for="item in boleenOption" :key="item.index">
              <p>{{formate(controlMsgFormFormal.isManaged, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.isManaged" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理层级" style="margin-bottom: 16px;" prop="manageLevel">
            <el-input v-model="controlMsgForm.manageLevel" class="input" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="产权取得方式" style="margin-bottom: 16px; margin-left: -9px" prop="propertySource">
            <div class="warning-box-required" v-for="item in propertySourceoptions" :key="item.index">
              <p>{{formate(controlMsgFormFormal.propertySource, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.propertySource" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in propertySourceoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="cmhkStatus" label="产权退出方式" style="margin-bottom: 16px" prop="propertyQuit">
            <el-select v-model="controlMsgForm.propertyQuit" size="small" class="input" @focus="handleFocus">
              <el-option
                v-for="item in propertyQuitType"
                :key="item.index"
                :label="item.value"
                :disabled="item.isValid==='1'?false:true"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否实体" style="margin-bottom: 16px;" prop="isEntity">
            <div class="warning-box" v-for="item in boleenOption" :key="item.index">
              <p>{{formate(controlMsgFormFormal.isEntity, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.isEntity" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否办理产权登记" style="margin-bottom: 16px;" prop="isRegisterOutside">
            <div class="warning-box" v-for="item in boleenOption" :key="item.index">
              <p>{{formate(controlMsgFormFormal.isRegisterOutside, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.isRegisterOutside" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产权登记情形" style="margin-bottom: 16px;" prop="registerStatus">
            <div class="warning-box" v-for="item in registerStatusoptions" :key="item.index">
              <p>{{formate(controlMsgFormFormal.registerStatus, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.registerStatus" size="small" class="input" clearable>
              <el-option
                v-for="item in registerStatusoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否纳入集团合并范围" style="margin-bottom: 16px;" prop="isCmhkMergeRange">
            <el-select v-model="controlMsgForm.isCmhkMergeRange" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="未合并原因" style="margin-bottom: 16px;" prop="unmergerReason">
            <el-input v-model="controlMsgForm.unmergerReason" class="input" size="small"></el-input>
          </el-form-item>
          <el-form-item label="集团合并报表上级单位" style="margin-bottom: 16px;" prop="superiorOrgName">
            <el-select
              v-model="controlMsgForm.superiorOrgName"
              size="small"
              filterable
              class="input"
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              @change="selectSuperior"
              placeholder="请输入字段搜索">
              <el-option
                v-for="item in superiorOrgOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会计核算类型" style="margin-bottom: 16px; margin-left: -9px" prop="accountingType">
            <div v-show="controlMsgFormFormal.accountTypeName!=null" class="warning-box-required"><p>{{`原值：${controlMsgFormFormal.accountTypeName}`}}</p></div>
            <el-cascader
              v-model="controlMsgForm.accountingType"
              :options="accountingType"
              @change="handleChange"
              :props="prop"
              size="small"
              filterable
              style="width: calc(100% - 9px); margin-left: 9px"
              clearable></el-cascader>
          </el-form-item>
          <el-form-item label="是否列入资产优化" style="margin-bottom: 16px;" prop="isAssetOptimization">
            <el-select v-model="controlMsgForm.isAssetOptimization" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否特殊目的公司" style="margin-bottom: 16px;" prop="isSpecialPurpose">
            <div class="warning-box" v-for="item in boleenOption" :key="item.index">
              <p>{{formate(controlMsgFormFormal.isSpecialPurpose, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.isSpecialPurpose" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="我方主要股东" style="margin-bottom: 16px" prop="mainShareholder">
            <div v-show="controlMsgFormFormal.mainShareholderName!=null" class="warning-box-required"><p>{{`原值：${controlMsgFormFormal.mainShareholderName}`}}</p></div>
            <el-select
              v-model="controlMsgForm.mainShareholderName"
              size="small"
              filterable
              class="input"
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              @change="selectMainHolder"
              placeholder="请输入字段搜索">
              <el-option
                v-for="item in mainShareholder"
                :key="item.code"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理单位" style="margin-bottom: 16px; margin-left: -9px" prop="manageOrgName">
            <div v-show="controlMsgFormFormal.manageOrgName!=null" class="warning-box-required"><p>{{`原值：${controlMsgFormFormal.manageOrgName}`}}</p></div>
            <el-select v-model="controlMsgForm.manageOrgName"
              size="small"
              filterable
              style="width: calc(100% - 9px); margin-left: 9px"
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              @change="selectManageType"
              placeholder="请输入字段搜索">
              <el-option
                v-for="item in managementOrgOption"
                :key="item.code"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="股权层级" style="margin-bottom: 16px;" prop="stockLevel">
            <el-input v-model="controlMsgForm.stockLevel" class="input" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="产权取得日期" style="margin-bottom: 16px;" prop="propertyDate">
             <div v-show="controlMsgFormFormal.propertyDate!=null" class="warning-box"><p>{{`原值：${controlMsgFormFormal.propertyDate}`}}</p></div>
            <el-date-picker clearable type="date" placeholder="选择日期" v-model="controlMsgForm.propertyDate" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item v-if="cmhkStatus" label="产权退出日期" style="margin-bottom: 16px;" prop="propertyQuitDate">
            <el-date-picker type="date" v-model="controlMsgForm.propertyQuitDate" size="small" @focus="handleFocus" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="我方出资比例" style="margin-bottom: 16px;" prop="subscribePer">
            <el-input v-model="controlMsgForm.subscribePer" class="input" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="我方表决权比例" style="margin-bottom: 16px;" prop="votePer">
            <el-input v-model="controlMsgForm.votePer" class="input" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="我方分红权比例" style="margin-bottom: 16px;" prop="dividendPer">
            <el-input v-model="controlMsgForm.dividendPer" class="input" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="经营状况" style="margin-bottom: 16px; margin-left: -9px" prop="status">
            <div class="warning-box-required" v-for="item in statusoptions" :key="item.index">
              <p>{{formate(controlMsgFormFormal.status, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.status" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in statusoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="国有出资情形" style="margin-bottom: 16px;" prop="stateEnterpreiseCapi">
            <div v-show="controlMsgFormFormal.stateEnterpreiseCapi!=null" class="warning-box"><p>{{`原值：${controlMsgFormFormal.stateEnterpreiseCapi}`}}</p></div>
            <el-select v-model="controlMsgForm.stateEnterpreiseCapi" size="small" class="input" clearable>
              <el-option
                v-for="item in cmhkCapitaloptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设立目的/存续理由" style="margin-bottom: 16px; margin-left: -9px" prop="purpose">
            <div class="warning-box-required" v-for="item in purposeoptions" :key="item.index">
              <p>{{formate(controlMsgFormFormal.purpose, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.purpose" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in purposeoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资本来源类型" style="margin-bottom: 16px; margin-left: -9px" prop="capiSource">
            <div class="warning-box-required" v-for="item in capiSourceoptions" :key="item.index">
              <p>{{formate(controlMsgFormFormal.capiSource, item.code, item.value)}}</p>
            </div>
            <el-select v-model="controlMsgForm.capiSource" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in capiSourceoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资产优化进度" style="margin-bottom: 16px;" prop="assetOptimizationProgress">
            <el-input v-model="controlMsgForm.assetOptimizationProgress" size="small" class="input"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="目前处置情况描述" prop="remark" style="margin-bottom: 16px;">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="controlMsgForm.remark" maxlength="1000" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <Dialog ref="outDialog" :dialogData="dialogData" @on-close="closeDialog" />
  </div>
</template>

<script>
import * as api from '@/api/modules/propertyRight.js'
import { getAccountType, getbasicData } from '@/api/modules/systemManage.js'
import Dialog from './PROutDialog'
export default {
  components: { Dialog },
  props: {
    controlMsg: {
      type: Object,
      require: true
    },
  },
  watch: {
    controlMsg: {
      handler(val) {
        this.ifDisabled = val.ifDisabled
      },
      deep: true
    }
  },
  data() {
    return {
      controlMsgForm: {
        manageLevel: '',
        propertyQuit: '',
        isCmhkMergeRange: '',
        unmergerReason: '',
        superiorOrgName: '',
        isAssetOptimization: '',
        assetOptimizationProgress: '',
        stockLevel: '',
        propertyQuitDate: '',
        subscribePer: '',
        votePer: '',
        dividendPer: '',
        remark: '',
        organizer: '',
        isManaged: '',
        manageOrgName: '',
        managementOrg: '',
        propertySource: '',
        isRegisterOutside: '',
        registerStatus: '',
        accountingType: '',
        mainShareholder: '',
        status: '',
        propertyDate: '',
        stateEnterpreiseCapi: '',
        purpose: '',
        capiSource: '',
        isEntity: '',
        isSpecialPurpose: ''
      },
      controlMsgFormFormal: {
        manageLevel: null,
        propertyQuit: null,
        isCmhkMergeRange: null,
        unmergerReason: null,
        superiorOrgName: null,
        isAssetOptimization: null,
        assetOptimizationProgress: null,
        stockLevel: null,
        propertyQuitDate: null,
        subscribePer: null,
        votePer: null,
        dividendPer: null,
        remark: null,
        organizer: null,
        isManaged: null,
        manageOrgName: null,
        managementOrg: null,
        propertySource: null,
        isRegisterOutside: null,
        registerStatus: null,
        accountingType: null,
        mainShareholder: null,
        status: null,
        propertyDate: null,
        stateEnterpreiseCapi: null,
        purpose: null,
        capiSource: null,
        isEntity: null,
        isSpecialPurpose: null
      },
      ifDisabled: true,
      // 下拉框数据
      organizeroptions: [],
      propertySourceoptions: [],
      propertyQuitType: [],
      purposeoptions: [],
      capiSourceoptions: [],
      statusoptions: [],
      cmhkCapitaloptions: [],
      registerStatusoptions: [],
      accountingType: [],
      managementOrgOption: [],
      mainShareholder: [],
      superiorOrgOption: [],
      prop: {
        label: 'value',
        value: 'code',
        children: 'child'
      },
      rules: {
        organizer: [{ required: true, message: '请选择主办单位', trigger: 'change' }],
        mainShareholderName: [{ required: true, message: '请选择我方主要股东', trigger: 'blur' }],
        propertySource: [{ required: true, message: '请选择产权取得方式', trigger: 'change' }],
        purpose: [{ required: true, message: '请选择设立目的', trigger: 'change' }],
        capiSource: [{ required: true, message: '请选择资本来源类型', trigger: 'change' }],
        accountingType: [{ required: true, message: '请选择会计核算类型', trigger: 'change' }],
        status: [{ required: true, message: '请选择经营状况', trigger: 'change' }],
        manageOrgName: [{ required: true, message: '请选择管理单位', trigger: 'blur' }],
      },
      saveCompanyMsg: {
        resource: '',
        taskId: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        cmhkId: '',
        companyCode: '',
        registerName: '',
        editOrAdd: ''
      },
      boleenOption: [
        {value: '是', code: '1'},
        {value: '否', code: '0'}
      ],
      ifBasic: false,
      cmhkStatus: false, // 判断是否是已退出公司
      dialogData: {
        dialogVisible: false,
        companyName: '',
        cmhkId: '',
        registerType: '',
        taskId: ''
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 格式化报警信息
    formate(text, code, value) {
      if (text == code) {
        return `原值：${value}`
      }
    },
    handleFocus() {
      this.dialogData.dialogVisible = true
    },
    // 查询管控信息(此方法在父组件中调用)
    getControlMsg(params) {
      this.saveCompanyMsg = params
      if (params.cmhkId === '0001') {
        this.ifBasic = true
        delete this.rules.mainShareholderName
        delete this.rules.manageOrgName
      } else {
        this.ifBasic = false
      }
      api.getEditControlMsg(params).then(res => {
        if (res.data.body) {
          const flag = res.data.body.temp.propertyQuit
          if (flag != null) {
            this.cmhkStatus = true
            this.controlMsgForm = res.data.body.temp
            this.controlMsgFormFormal = res.data.body.formal
          } else {
            const ifEdit = params.economicItem
            if (ifEdit === '11' || ifEdit === '35' || ifEdit === '07' || ifEdit === '08') {
              this.dialogData.dialogVisible = true
              this.dialogData.companyName = params.companyChiName
              this.dialogData.cmhkId = params.cmhkId
              this.dialogData.registerType = params.registerType
              this.dialogData.taskId = params.taskId
              this.$nextTick(() => {
                this.$refs.outDialog.initData()
                this.cmhkStatus = true
                this.controlMsgForm = res.data.body.temp
                this.controlMsgFormFormal = res.data.body.formal
              })
            } else {
              return false
            }
          }
        }
      })




      // // 根据产权登记情形
      // this.dialogData.companyName = params.companyChiName
      // this.dialogData.cmhkId = params.cmhkId
      // this.dialogData.registerType = params.registerType
      // this.dialogData.taskId = params.taskId
      // const ifEdit = params.economicItem
      // if (ifEdit === '11' || ifEdit === '35' || ifEdit === '07' || ifEdit === '08') {
      //   this.dialogData.dialogVisible = true
      //   this.$nextTick(() => {
      //     this.$refs.outDialog.initData()
      //     this.cmhkStatus = true
      //   })
      // } else {

      // }
      // this.saveCompanyMsg = params
      // if (params.cmhkId === '0001') {
      //   this.ifBasic = true
      //   delete this.rules.mainShareholderName
      //   delete this.rules.manageOrgName
      // } else {
      //   this.ifBasic = false
      // }
      // api.getEditControlMsg(params).then(res => {
      //   if (res.data.body) {
      //     this.controlMsgForm = res.data.body.temp
      //     this.controlMsgFormFormal = res.data.body.formal
      //   }
      // })
    },
    // 修改管控信息(此方法在父组件中调用)
    editControlMsg() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const obj = Object.assign(this.controlMsgForm, this.saveCompanyMsg)
          api.addControlMsg(obj).then(res => {
            if (res.data.code === '0') {
              this.$message.success('修改管控信息成功')
              this.getControlMsg(this.saveCompanyMsg) // 修改之后重新查询管控信息并渲染
              this.$emit('changeStateControl')
            }
          })
        } else {
          return false
        }
      })
    },
    initData() {
      // 主办单位
      api.Organizer().then(res => {
        this.organizeroptions = res.data.body
      })
      // 产权取得方式
      api.propertySource().then(res => {
        this.propertySourceoptions = res.data.body
      })
      // 产权退出方式
      getbasicData({field: 'property_quit', tableName: 'company_info'}).then(res => {
        this.propertyQuitType = res.data.data
      })
      // 设立目的/存续理由
      api.purpose().then(res => {
        this.purposeoptions = res.data.body
      })
      // 资本来源类型
      api.capiSource().then(res => {
        this.capiSourceoptions = res.data.body
      })
      // 经营状况
      api.businessStatus().then(res => {
        this.statusoptions = res.data.body
      })
      // 国有出资情形
      api.stateEnterpriseCapi().then(res => {
        this.cmhkCapitaloptions = res.data.body
      })
      // 产权登记情形
      api.registerStatus().then(res => {
        this.registerStatusoptions = res.data.body
      })
      // 会计核算类型
      getAccountType().then(res => {
        this.accountingType = this.getTreeData(res.data.data[0].child)
      })
    },
    getTreeData(data){
      // 循环遍历json数据
      for (let i=0; i<data.length; i++) {
        if (data[i].child.length<1) {
          // children若为空数组，则将children设为undefined
          data[i].child = null
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].child)
        }
      }
      return data
    },
    handleChange(val) {
      const len = val.length
      const str = val[len-1]
      this.controlMsgForm.accountingType = str
    },
    // 管理单位/我方主要股东远程搜索
    remoteMethod(query) {
      const data = {
        companyChiName: query
      }
      api.proxyShareholder(data).then(res => {
        this.managementOrgOption = res.data.body
        this.mainShareholder = res.data.body
        this.superiorOrgOption = res.data.body
      })
    },
    selectMainHolder(val) {
      this.controlMsgForm.mainShareholder = val
    },
    selectManageType(val) {
      this.controlMsgForm.managementOrg = val
    },
    selectSuperior(val) {
      this.controlMsgForm.cmhkMergeSupUnit = val
    },
    // 移除校验结果
    removeRequired() {
      this.$refs['form'].clearValidate()
    },
    // 弹窗组件关闭时
    closeDialog(val) {
      this.dialogData.dialogVisible = false
      this.dialogData.companyName = ''
      this.dialogData.cmhkId = ''
      this.dialogData.registerType = ''
      this.dialogData.taskId = ''
      if (val.isRefresh) {
        api.getEditControlMsg(this.saveCompanyMsg).then(res => {
        if (res.data.body) {
          this.controlMsgForm = res.data.body.temp
          this.controlMsgFormFormal = res.data.body.formal
        }
      })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .btn {
    width: calc(100% - 40px);
    display: flex;
    padding: 0 20px;
    margin-bottom: 10px;
  }
  .input {
    width: 100%;
  }
  .warning-box {
    font-size: 12px;
    background-color: rgba(225, 101, 49, 0.2);
    border-radius: 3px;
    position: absolute;
    top: -17px;
    left: 0;
    z-index: 1;
    p {
      color: rgba(225, 101, 49);
    }
  }
  .warning-box-required {
    font-size: 12px;
    margin-left: 9px;
    background-color: rgba(225, 101, 49, 0.2);
    border-radius: 3px;
    position: absolute;
    top: -17px;
    left: 0;
    z-index: 1;
    p {
      color: rgba(225, 101, 49);
    }
  }
</style>
<style>
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  #warning .el-form-item__content {
    line-height: 17px;
    position: relative;
    font-size: 14px;
  }
</style>